<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>rendeer.js: mesh loading example</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<style type='text/css'>
		html, body { width: 100%; height: 100%; margin: 0; padding: 0 }
	</style>
	<script type="text/javascript" src="../external/gl-matrix-min.js"></script>
	<script type="text/javascript" src="../external/litegl.js"></script>
	<script type="text/javascript" src="../build/rendeer.js"></script>
	<script type="text/javascript">
	
	function init()
	{
		//create a scene
		var scene = new RD.Scene();

		//create the rendering context
		var context = GL.create({width: window.innerWidth, height:window.innerHeight});
		var renderer = new RD.Renderer( context );
		document.body.appendChild(renderer.canvas); //attach

		//create camera
		var camera = new RD.Camera();
		camera.perspective( 45, gl.canvas.width / gl.canvas.height, 1, 1000 );
		camera.lookAt( [0,200,300],[0,100,0],[0,1,0] );

		//create a node
		var man = new RD.SceneNode();
		man.color = [1,0,0,1];
		man.mesh = "data/man.obj";
		man.shader = "phong";

		//inner update
		man.update = function(dt) { 
			this.rotate(dt * 0.1,RD.UP);
			this.color[0] = 1.0;
			this.color[1] = Math.sin( getTime() * 0.001 );
			this.color[2] = 1.0 - this.color[1];
		}

		scene.root.addChild(man);


		//global settings
		var bg_color = vec4.fromValues(0.2,0.3,0.4,1);

		//main render loop
		var last = now = getTime();
		requestAnimationFrame(animate);
		function animate() {
			requestAnimationFrame( animate );

			last = now;
			now = getTime();
			var dt = (now - last) * 0.001;
			renderer.clear(bg_color);
			renderer.render(scene, camera);
			scene.update(dt);
		}

		//input
		renderer.context.captureMouse();
		renderer.context.onmousemove = function(e)
		{
			if(e.dragging)
				man.rotate( e.deltax * 0.01, RD.UP );
		}
	}


	</script>
</head>
<body>
<script>init();</script>
</body>
</html>


